<template>
  <div class="commentAll" id="commentContainer">
    <div class="comment-head">
      <span v-if="commentNum > 0">已有{{ commentNum }}条评论</span>
      <span v-else>没有评论</span>
    </div>
    <comment-pen v-show="penVisible('article', 0)"></comment-pen>

    <ul
      class="navigation clearfix"
      v-if="commentNum > 0 && comments.length > 0"
    >
      <div class="navigation-wrapper">
        <li
          :key="index"
          data-container-name="comments"
          v-for="(tab, index) in tabs"
          @click="toggleTab(index)"
          :class="{ active: active == index }"
        >
          {{ tab.caption }}
        </li>
      </div>

      <pager
        v-if="commentPagination.page > 1"
        style="float:right"
        displaySize="mini"
        :page-index="commentPagination.page"
        :total="commentPagination.total"
        :page-size="commentPagination.size"
        @change="commentPaginationChange"
        :scrollTo="{ enable: false }"
      ></pager>
    </ul>

    <comment-list :comments="comments" :expand="true"></comment-list>
    <!-- 分页 -->
    <ul
      class="pagination"
      v-if="commentPagination.page > 1"
      style="text-align: center;margin-top:10px;"
    >
      <pager
        style=""
        :page-index="commentPagination.page"
        :total="commentPagination.total"
        :page-size="commentPagination.size"
        @change="commentPaginationChange"
        :scrollTo="{ enable: false }"
      ></pager>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import commentList from './list.vue';

import { Comment } from 'src/models/comment';
import { Comment as CommentType } from 'src/models/comment';
import { Reply } from 'src/models/reply';
import commentPen from './pen.vue';
import mixin from './mixin';
import { SortType } from 'src/constants/query';

@Component<commentBox>({
  components: {
    commentList,
    commentPen
  },
  mounted() {
    this.$root.$on('submitComment', this.sendComment);
    this.getComments();
  }
})
export default class commentBox extends mixins(mixin) {
  //排序tab
  private tabs: Array<any> = [
    {
      sortkey: SortType.Hot,
      caption: '热门'
    },
    {
      sortkey: SortType.Newest,
      caption: '最新'
    },
    {
      sortkey: SortType.Oldest,
      caption: '最早'
    }
  ];
  //

  //活动tab
  private active: number = 1;

  //显示
  @Prop({ type: Boolean, required: false, default: false })
  Fetching!: false;

  //模块类型
  @Prop({ type: String, required: true, default: 'post' })
  ModuleType!: 'post';

  //评论所属父级ID
  @Prop({ type: Number, required: false, default: 0 })
  Root_ID!: 0;

  //评论所属父级类型
  @Prop({ type: String, required: false, default: 'blog' })
  Root_Type!: string;
  //评论总个数
  @Prop({ type: Number, required: false, default: 0 })
  commentNum!: number;

  get isFetchingComment() {
    return this.$store.state.comment.fetching;
  }

  get isFetching() {
    // 1. 宿主组件还在加载时，列表和 tool 都呈加载状态
    // 2. 宿主组件加载完成，如果自己还在请求，则列表呈加载状态
    // 3. 自己已请求完，宿主组件还在加载，列表和 tool 都呈加载状态
    return this.Fetching || this.isFetchingComment;
  }

  //评论分页
  get commentPagination(): any {
    return (
      this.$store.state.comment.comments.pagination || {
        page: 1,
        size: 10,
        total: 0
      }
    );
  }

  ///当前排序key
  get currentSortkey() {
    return this.tabs[this.active].sortkey;
  }

  get comments(): Comment[] {
    return this.$store.state.comment.comments.data || [];
  }

  get authorId(): number {
    return 0;
  }
  //评论翻页
  // @Emit('getComments')
  async commentPaginationChange(page: number) {
    let sortValue = '';
    if (this.currentSortkey == SortType.Hot) {
      sortValue = 'likes,desc';
    }
    if (this.currentSortkey == SortType.Newest) {
      sortValue = 'createdAt,desc';
    }
    if (this.currentSortkey == SortType.Oldest) {
      sortValue = 'createdAt,asc';
    }
    var param = {
      page: page,
      size: this.commentPagination.size,
      moduleId: this.Root_ID,
      comemntModuleType: this.ModuleType,
      sort: sortValue
    };

    await this.$store.dispatch('comment/FetchList', param);
    // , {

    //   type: this.Root_Type,
    //   sortkey: this.currentSortkey,
    //   page: page
    // }
  }

  //切换排序tab
  toggleTab(index: number) {
    if (this.active == index) return;
    this.active = index;
    // this.$store.commit("comment/SetSortkey",this.currentSortkey);
    this.commentPaginationChange(1);
  }

  get visitor() {
    return this.$store.state.visitor.data;
  }
  //展开回复
  ExpandReply(comment: any) {
    // comment.ExpandAll =!comment.ExpandAll;

    this.$store.commit('comment/SetCommentExpand', comment);
  }

  public getComments() {
    this.commentPaginationChange(1);
  }

  //发评论
  async sendComment(val: string): Promise<void> {
    var comment: any = {
      content: val,
      moduleId: this.Root_ID,
      comemntModuleType: this.ModuleType,
      author: this.userProfile.name,
      // email: this.visitor.mail,
      // site: this.visitor.site,
      avatar: this.userProfile.avatar
    };

    if (this.commentPenPosition.quote) {
      const quote = this.commentPenPosition.quote;
      comment.parentId = quote.parentId > 0 ? quote.parentId : quote.id;
      comment.quoteId = this.commentPenPosition.quote.id;
      comment.replyName = this.commentPenPosition.quote.author;
    }
    var res = await this.$store.dispatch('comment/PostComment', comment);
    if (res.success) {
      this.$q.notify({
        type: 'positive',
        message: `评论成功`,
        position: 'top'
      });
      this.commentNum++;
      this.commentPaginationChange(1);
      this.hideCommentPen();
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  float: left;
}
.flex-text-wrap,
pre {
  margin: 0 !important;
}
@media (max-width: 1219px) {
  .commentAll {
    width: 690px;
  }
}

@media (max-width: 991px) {
  .commentAll {
    width: 100%;
  }
}
.commentAll {
  padding: 20px;
  border: 1px solid #ededed;
  margin: 20px auto;
}
.plBtn {
  width: 75px;
  height: 36px;
  line-height: 36px;
  background-color: #339b53;
  text-align: center;
  display: block;
  float: right;
  color: #ffffff;
  font-size: 12px;
  border-radius: 6px;
  margin-right: 2px;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.flex-text-wrap {
  /* width: 100%; */
  position: relative;
  *zoom: 1;
  width: 70%;
  float: left;
}
textarea,
.flex-text-wrap {
  outline: 0;
  margin: 0;
  border: none;
  padding: 0;
  *padding-bottom: 0 !important;
}
.flex-text-wrap textarea,
.flex-text-wrap pre {
  *white-space: pre;
  *word-wrap: break-word;
  white-space: pre-wrap;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.flex-text-wrap textarea {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  resize: none;
  /* IE7 box-sizing fudge factor */
  *height: 94%;
  *width: 94%;
}
.flex-text-wrap pre {
  display: block;
  visibility: hidden;
}
.flex-text-wrap,
textarea,
.flex-text-wrap pre {
  line-height: 1.7;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 100%;
  padding: 10px 15px;
  border: 1px solid #c6c8ce;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  background-clip: padding-box;
  box-shadow: 0 0 8px rgba(182, 195, 214, 0.6) inset, 0 1px 1px #fff;
  transition-duration: 300ms;
  transition-property: border-color, box-shadow;
}

ul.navigation {
  clear: both;

  color: #ccc;

  line-height: 2em;
  font-size: 1em;
  margin-bottom: 0.5em;
  transition: 0.5s;
  position: relative;
}
.navigation::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #e4e7ed;
  z-index: 1;
}

ul.navigation .navigation-wrapper {
  position: relative;
  padding-bottom: 3px;
  float: left;

  li {
    display: inline-block;
    position: relative;
    padding: 0 1em;
    transition: 0.5s;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    user-select: none;
    &::before {
      content: '';
      width: 0;
      height: 1px;
      background: #1976d2;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: 0.5s;
    }
    &.active,
    &:hover {
      color: #1976d2;
      &::before {
        content: '';
        width: 80%;
      }
    }
  }
}

/* 显示隐藏评论 */

.placeholder {
  width: 30%;
  height: 20px;
  float: left;
}

.fa:before {
  margin-left: 2px;
}

#commentContainer >>> .comment-img {
  max-width: 100%;
  max-height: 200px;
  object-fit: cover;
  cursor: pointer;
}

.list-enter,
.list-leave-to {
  height: 0;

  transform: translateY(-30px);
}
​ .list-enter-active {
  height: 200px;
  transition: all 1s ease;
}
.list-leave-active {
  transition: all 1s ease;
}
#comment-author-info > div {
  width: 33.33%;
  box-sizing: border-box;
  padding: 0 1em 1em 0;
  float: left;
}
#comment-author-info > div > label {
  font-size: 1em;
  line-height: 1.4em;
  padding-bottom: 0.5em;
  display: block;
}

#comment-author-info > div:last-child {
  padding-right: 0;
}
.comment-form-comment {
  margin-bottom: 0.6em;
}

@media screen and (max-width: 750px) {
  #comment-author-info > div {
    width: auto;
    padding: 0;
  }
  textarea#comment {
    margin-top: 10px;
  }
}

.comment-input {
  min-height: 91px;
  max-height: 250px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555;
  display: block;
  font-size: 14px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  outline: none;
  margin-bottom: 10px;
}
#editor:focus {
  border-color: #66afe9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset,
    0 0 8px rgba(102, 175, 233, 0.6);
  outline: 0 none;
}

.comment-head {
  font-size: 15px;
  position: relative;
  z-index: 2;
  font-weight: 500;
  border-left: 3px solid #1976d2;
  padding: 11px;
}

.comment-img {
  cursor: pointer;
}

@media screen and (max-width: 500px) {
  .commentAll {
    padding: 10px;
  }
  ul.navigation .navigation-wrapper {
    position: relative;
    padding-bottom: 3px;
    float: left;
    .tabs_active {
      width: 30px;
    }
    li {
      font-size: 12px;
      padding: 0 5px;
    }
  }
}
</style>
